<template>
  <div style="height:100%;widht:100%" v-loading='loading'>
    <div class='left'>
      <div class="tab-box" style="position:relative;">
        <div class="bottom" style="margin-top:20px;height:calc(100% - 52px);padding:0 10px;">
          <a-input-search style="margin-bottom: 8px" @change="onChange" allow-clear />
          <Tree :expandedKeys='expandedKeys' :treeData='gData' :replaceFields='replaceFields' :selectedKeys='test' @handClick='handClick'></Tree>
        </div>
        <div class="btn-group-item" style="position:absolute;right:5px;bottom:5px;" @click="tjfl">
          <IconFont type="swx-icon-tianjia" />
          添加分类
        </div>
      </div>
    </div>

    <!-- 点击一级节点 -->
    <div class='right' v-if="flag && !tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" :class="nodeMessege.isSave?'':'notAllowedBtn'" @click="isSaveBtn">
              <IconFont type="swx-icon-baocun" />
              保存
            </div>
            <div class="btn-group-item" style="margin-right:10px" @click="addGn">
              <IconFont type="swx-icon-tianjia" />
              添加功能
            </div>
            <div class="btn-group-item" @click="node1shanChu" :class="nodeMessege.isSave?'':'notAllowedBtn'">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:80px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>上级分类</td>
              <td style="width:15%;padding-right:0;">
                <a-tree-select v-model="form.fflbm" :disabled='true' show-search style="width: 100%;" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }"
                  allow-clear tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in gnflLists" :key="item.bm" :title="item.mc" :value="item.bm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.bm" :title="el.mc" :value="el.bm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.bm" :title="ele.mc" :value="ele.bm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
              <td>分类名称</td>
              <td>
                <input :style="{cursor:nodeMessege.isSave?'':'not-allowed'}" class="riginalInput" v-model="form.flmc" :disabled='!nodeMessege.isSave' />
              </td>
            </tr>
            <tr>
              <td>序号</td>
              <td>
                <input :style="{cursor:nodeMessege.isSave?'':'not-allowed'}" class="riginalInput" v-model="form.flxh" :disabled='!nodeMessege.isSave' />
              </td>
              <td>分类图标</td>
              <td>
                <input :style="{cursor:nodeMessege.isSave?'':'not-allowed'}" class="riginalInput" v-model="form.fltb" :disabled='!nodeMessege.isSave' />
              </td>
            </tr>

          </table>
        </div>
        <div style="margin-top:10px;height:calc(100% - 190px)">
          <a-table :columns="columns" :data-source="tableLists" :pagination="pagination"></a-table>
        </div>
      </div>
    </div>

    <!-- 点击二级节点 -->
    <div class='right' v-if="!flag && !tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" @click="preservation">
              <IconFont type="swx-icon-baocun" />
              保存
            </div>
            <div class="btn-group-item" :class="[!flag && nodeMessege.level=='2'?'':'notAllowedBtn']" @click="delet">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:300px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>功能名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="gndy.gnmc" />
              </td>
              <td>功能显示名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="gndy.gnxsmc" />
              </td>
            </tr>
            <tr>
              <td>功能地址
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="gndy.gndz" />
              </td>
              <td>功能图标</td>
              <td>
                <input class="riginalInput" v-model="gndy.gntb" />
              </td>
            </tr>
            <tr>
              <td>发布单位</td>
              <td>
                <input style="width:100%;cursor:not-allowed" class="riginalInput" v-model="gndy.dwmc" disabled />
              </td>
              <td>功能初始参数</td>
              <td>
                <input class="riginalInput" v-model="gndy.gncs" />
              </td>
            </tr>
            <tr>
              <td>功能编辑器名称</td>
              <td>
                <input class="riginalInput" v-model="gndy.qxbjqmc" />
              </td>
              <td>功能编辑器地址</td>
              <td>
                <input class="riginalInput" v-model="gndy.qxbjqdz" />
              </td>
            </tr>
            <tr>
              <td>是否快捷方式</td>
              <td style="text-align:left;">
                <a-radio-group v-model="gndy.sfkjfs">
                  <a-radio value="Y">
                    是
                  </a-radio>
                  <a-radio value="N">
                    否
                  </a-radio>
                </a-radio-group>
              </td>
              <td>功能分类</td>
              <td style="width:100%;padding-right:0;">
                <a-tree-select v-model="gndy.flbm" treeNodeFilterProp='title' show-search style="width: 100%;"
                  :dropdown-style="{maxHeight: '400px', overflow: 'auto' }" allow-clear tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in gnflLists" :key="item.bm" :title="item.mc" :value="item.bm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.bm" :title="el.mc" :value="el.bm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.bm" :title="ele.mc" :value="ele.bm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
            </tr>
            <tr>
              <td>是否第三方功能</td>
              <td style="text-align:left;">
                <a-radio-group v-model="gndy.sfdsfgn">
                  <a-radio value="Y">
                    是
                  </a-radio>
                  <a-radio value="N">
                    否
                  </a-radio>
                </a-radio-group>
              </td>
              <td>功能类别</td>
              <td style="width:100%;padding-right:0;">
                <a-tree-select v-model="gndy.gnlb_dm" show-search style="width: 100%;" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }" allow-clear
                  tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in gnlbLists" :key="item.dm" :title="item.mc" :value="item.dm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.dm" :title="el.mc" :value="el.dm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.dm" :title="ele.mc" :value="ele.dm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
            </tr>
            <tr>
              <td>
                <span>适用范围</span>
                <span class="red">*</span>
              </td>
              <td style="text-align:left;">
                <a-checkbox-group v-model="gndy.syfw" name="checkboxgroup" :options="plainOptions" />
              </td>
              <td>序号
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="gndy.gnxh" />
              </td>
            </tr>
            <tr style="width:100%;">
              <td>是否菜单显示
                <span class="red">*</span>
              </td>
              <td style="text-align:left;">
                <a-radio-group v-model="gndy.sfcdxs">
                  <a-radio value="Y">
                    是
                  </a-radio>
                  <a-radio value="N">
                    否
                  </a-radio>
                </a-radio-group>
              </td>
              <td style="width:300px">说明</td>
              <td>
                <input class="riginalInput" v-model="gndy.bz" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!-- 添加分类 -->
    <div class='right' v-if="tjfLFlag">
      <div class="tab-box" style="padding:10px">
        <div style="height:50px;line-height:50px">
          <div style="float:right">
            <div class="btn-group-item" style="margin-right:10px" @click="tjflBaoCun">
              <IconFont type="iconbaocun" />
              保存
            </div>
            <div class="btn-group-item notAllowedBtn" style="margin-right:10px">
              <IconFont type="swx-icon-tianjia" />
              添加功能
            </div>
            <div class="btn-group-item notAllowedBtn">
              <IconFont type="swx-icon-shanchu" />
              删除
            </div>
          </div>
        </div>
        <div style="height:80px;">
          <table class="riginalTable" style="table-layout:fixed;">
            <tr>
              <td>上级分类</td>
              <td style="width:15%;padding-right:0;">
                <a-tree-select v-model="tjflForm.fflbm" show-search style="width: 100%;" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }" allow-clear
                  tree-default-expand-all>
                  <a-tree-select-node v-for="(item,index) in gnflLists" :key="item.bm" :title="item.mc" :value="item.bm">
                    <a-tree-select-node v-for="(el,i) in item.children" :key="el.bm" :title="el.mc" :value="el.bm">
                      <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.bm" :title="ele.mc" :value="ele.bm">
                      </a-tree-select-node>
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select>
              </td>
              <td>分类名称
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tjflForm.flmc" />
              </td>
            </tr>
            <tr>
              <td>序号
                <span class="red">*</span>
              </td>
              <td>
                <input class="riginalInput" v-model="tjflForm.flxh" />
              </td>
              <td>分类图标</td>
              <td>
                <input class="riginalInput" v-model="tjflForm.fltb" />
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import service from '../api/api';
const plainOptions = ["省级院", "市级院", "基层院"];
const columns = [
  {
    title: "序号",
    dataIndex: "gnxh",
  },
  {
    title: "发布单位",
    dataIndex: "dwmc",
  },
  {
    title: "功能名称",
    dataIndex: "gnmc",
  },
  {
    title: "功能显示名称",
    dataIndex: "gnxsmc",
  },
  {
    title: "功能地址",
    dataIndex: "gndz",
  },
  {
    title: "功能编辑名称",
    dataIndex: "qxbjqmc",
  },
  {
    title: "功能编辑器地址",
    dataIndex: "qxbjqdz",
  },
  {
    title: "是否快捷方式",
    dataIndex: "sfkjfs",
  },
  // {
  //   title: "操作",
  //   key: "action",
  //   scopedSlots: { customRender: "action" },
  // },
];
import Tree from "./tree";
import vuex from "vuex";
const logininfo = vuex.createNamespacedHelpers("login");
export default {
  data() {
    return {
      // 分页
      pagination: {
        pageSize: 10, // 一页的数据限制
        current: 1, // 当前页
        total: 0, // 总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变 pageSize
        pageSizeOptions: ["5", "10", "30"], // 指定每页可以显示多少条
        onShowSizeChange: (current, pagesize) => {
          // 改变 pageSize时的回调
          this.pagination.pageNum = current;
          this.pagination.pageSize = pagesize;
          this.getTableLists();
        },
        onChange: (current) => {
          // 切换分页时的回调，
          this.pagination.current = current;
          this.getTableLists();
        },
        // 可以展示总数
        showTotal: (total) => {
          return `总共：${total}条`;
        },
      },
      columns,
      plainOptions,
      replaceFields: {
        children: "children",
        title: "mc",
        key: "bm",
      },
      test: [], //默认选中
      gData: [], //树形数据
      nodeMessege: "", //节点信息
      tableLists: [], //table数据
      form: {
        flbm: "",
        fflbm: "",
        flmc: "",
        flxh: "",
      },
      tjflForm: {
        fflbm: "",
        flmc: "",
        flxh: "",
      },
      gndy: {
        gnmc: "",
        gnxsmc: "",
        gndz: "",
        dwmc: "",
        gncs: "",
        qxbjqmc: "",
        qxbjqdz: "",
        sfkjfs: "",
        flbm: "",
        bz: "",
        gnxh: "",
        syfw: ["省级院"],
        gnlb: "",
        sfcdxs: "Y",
        gntb: "",
      },
      gnflLists: [],
      flag: true,
      tjfLFlag: false,
      expandedKeys: [],
      gnlbLists: [],
      loading: false,
    };
  },
  components: {
    Tree,
  },
  created() {
    this.serchMenuLeft();
    this.getSelectLists();
    this.getGnlbLists();
  },
  methods: {
    async getGnlbLists() {
      let res = await service.bydm.queryTable({ lbbm: "0035" });
      if (res.code == 0) {
        this.gnlbLists = res.data;
      }
    },
    // 一级节点得删除
    node1shanChu() {
      if (!this.nodeMessege.isSave) {
        return;
      }
      let data = {
        flbm: this.nodeMessege.bm,
        zhxgrbm: this.personInfo.rybm,
      };
      service.gnzj.deleteGnfl(data).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.serchMenuLeft();
          this.getSelectLists();
        }
      });
    },
    isSaveBtn() {
      if (!this.nodeMessege.isSave) {
        return;
      }
      let data = {
        ...this.form,
        dwbm: this.personInfo.dwbm,
        dwmc: this.personInfo.dwmc,
        zhxgrbm: this.personInfo.rybm,
      };
      service.gnzj.updateGnfl(data).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.serchMenuLeft();
          this.getSelectLists();
        }
      });
    },
    // 添加分类
    tjfl() {
      this.tjfLFlag = true;
    },

    // 添加分类保存
    async tjflBaoCun() {
      if (this.tjflForm.flxh != "" && this.tjflForm.flmc != "") {
        let data = {
          bz: "",
          cjrbm: this.personInfo.rybm,
          cjrmc: this.personInfo.mc,
          dwbm: this.personInfo.dwbm,
          dwmc: this.personInfo.dwmc,
          fflbm: this.tjflForm.fflbm,
          flmc: this.tjflForm.flmc,
          fltb: "",
          flxh: this.tjflForm.flxh,
        };
        let res = await service.gnzj.addGnfp(data);
        if (res.code == 0) {
          this.$message.success("新增成功");
          this.serchMenuLeft();
          this.getSelectLists();
        }
      } else {
        this.$message.warning("完善信息");
      }
    },
    //获取功能分类最大序号
    getMaxNum() {
      service.gnzj.getMaxXh({ dwbm: this.personInfo.dwbm }).then((res) => {
        if (res.code == 0) {
          this.gndy.gnxh = res.data.flxh;
        }
      });
    },
    // 获取功能分类下拉列表
    getSelectLists() {
      service.gnzj.getSelects({ dwbm: this.personInfo.dwbm }).then((res) => {
        if (res.code == 0) {
          this.gnflLists = res.data;
        }
      });
    },
    // 添加功能
    addGn() {
      this.gndy.dwmc = this.personInfo.dwmc;
      this.getMaxNum();
      this.gndy.flbm = this.nodeMessege.bm;
      this.flag = false;
    },
    // 保存
    preservation() {
      if (
        this.gndy.gnmc != "" &&
        this.gndy.gnxsmc != "" &&
        this.gndy.gnxh != "" &&
        this.gndy.gndz != "" &&
        this.gndy.sfcdxs != "" &&
        this.gndy.syfw.length > 0
      ) {
        console.log('this.nodeMessege', this.nodeMessege);
        switch (this.nodeMessege.level) {
          case "1":
            this.baoCun();
            break;
          case "2":
            this.xiuGai();
            break;
        }
      } else {
        this.$message.warning("请完善信息");
      }
    },
    // 保存
    async baoCun() {
      let res = await service.gnzj.addGnDy({
        ...this.gndy,
        dwbm: this.personInfo.dwbm,
        cjrbm: this.personInfo.rybm,
        cjrmc: this.personInfo.mc,
      });
      if (res.code == 0) {
        this.serchMenuLeft();
        this.getSelectLists();
        this.$message.success("操作成功");
      }
    },
    // 修改信息
    async xiuGai() {
      let res = await service.gnzj.changeGndy({
        ...this.gndy,
        dwbm: this.personInfo.dwbm,
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
      });
      if (res.code == 0) {
        this.serchMenuLeft();
        this.getSelectLists();
        this.$message.success("修改成功");
      }
    },
    // 删除
    async delet() {
      if (this.nodeMessege.level == 1) return;
      let data = {
        dwbm: this.personInfo.dwbm,
        gnbm: this.nodeMessege.bm,
        zhxgrbm: this.personInfo.rybm,
        zhxgrmc: this.personInfo.mc,
      };
      let res = await service.gnzj.delete(data);
      if (res.code == 0) {
        this.serchMenuLeft();
        this.getSelectLists();
        this.$message.success("删除成功");
      }
    },
    serchMenuLeft() {
      service.gnzj.queryTree({ dwbm: this.personInfo.dwbm }).then((res) => {
        if (res.code == 0) {
          this.flag = true;
          this.gData = res.data;
          console.log(res.data);
          this.gData1 = JSON.parse(JSON.stringify(res.data)); //用于筛选
          this.test = [res.data[0].bm]; //设置默认选中值
          this.nodeMessege = res.data[0]; //节点信息
          this.getTableLists(); //查询表格
          this.getTop();
          this.tjfLFlag = false;
        }
      });
    },
    handClick(e) {
      this.gndy = {
        gnmc: "",
        gnxsmc: "",
        gndz: "",
        dwmc: "",
        gncs: "",
        qxbjqmc: "",
        qxbjqdz: "",
        sfkjfs: "",
        flbm: "",
        bz: "",
        gnxh: "",
        syfw: ["省级院"],
        gnlb: "",
        sfcdxs: "Y",
      };
      this.tjfLFlag = false;
      this.test = e.selectedKeys;
      this.nodeMessege = e.info.node.dataRef;
      //不同的节点部分页面的显示隐藏
      if (this.nodeMessege.level == 1) {
        this.flag = true;
      }
      if (this.nodeMessege.level == 2) {
        this.flag = false;
        this.getGndyMsg();
        return;
      }
      this.getTableLists(); //查询表格
      this.getTop();
    },
    // 单个查询
    async getGndyMsg() {
      let data = {
        dwbm: this.personInfo.dwbm,
        gnbm: this.nodeMessege.bm,
      };
      let res = await service.gnzj.getGnDy(data);
      if (res.code == 0) {
        this.gndy = res.data;
      }
    },
    getTop() {
      let data = {
        dwbm: this.personInfo.dwbm,
        flbm: this.nodeMessege.bm,
      };
      service.gnzj.getGnfl(data).then((res) => {
        if (res.code == 0) {
          this.form = res.data || this.form;
        }
      });
    },
    getTableLists() {
      this.loading = true;
      let data = {
        filter: {
          dwbm: this.personInfo.dwbm,
          flbm: this.nodeMessege.bm,
        },
        orderBy: "",
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
      };
      service.gnzj.getTable(data).then((res) => {
        if (res.code == 0) {
          // console.log(res);
          this.loading = false;
          this.tableLists = res.data.list;
          this.pagination.total = res.data.total;
        }
      });
    },
    onSearch(e) {
      const value = e;
      if (value) {
        const tree = JSON.parse(JSON.stringify(this.tableLists1));
        this.tableLists = this.filter1(tree, value);
      } else {
        this.tableLists = this.tableLists1;
      }
    },
    onChange(e) {
      const value = e.target.value;
      if (value) {
        const tree = JSON.parse(JSON.stringify(this.gData1));
        this.gData = this.filter(tree, value);
      } else {
        this.gData = this.gData1;
      }
    },
    // nodes就是树形的最原始数据，query就是关键字，最后会返回满足条件的节点数组
    filter(nodes, query) {
      // 条件就是节点的title过滤关键字
      let predicate = function (node) {
        if (node.mc.indexOf(query) > -1) {
          return true;
        } else {
          return false;
        }
      };
      if (!(nodes && nodes.length)) {
        return [];
      }
      let newChildren = [];
      for (let node of nodes) {
        // 以下两个条件任何一个成立，当前节点都应该加入到新子节点集中
        // 1. 子孙节点中存在符合条件的，即 subs 数组中有值
        // 2. 自己本身符合条件
        let subs = this.filter(node.children, query);
        if (predicate(node)) {
          newChildren.push(node);
        } else if (subs && subs.length) {
          node.children = subs;
          newChildren.push(node);
          this.expandedKeys = [node.bm];
        }
      }

      return newChildren.length ? newChildren : [];
    },
  },
  computed: {
    ...logininfo.mapState(["personInfo"]),
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.tableNodeMessege = this.getChidlren1(
            this.tableLists,
            selectedRowKeys[0]
          );
          this.selectedRows = selectedRows;
        },
      };
    },
  },
};
</script>

<style lang='less' scoped>
.main-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 5px;
  .left {
    float: left;
    width: 310px;
    height: 100%;
  }
  .right {
    float: right;
    height: 100%;
    width: calc(100% - 326px);
  }
}
/deep/ .ant-tabs-bar {
  margin: 0;
}
/deep/ .ant-tabs-tabpane {
  padding: 16px;
}
/deep/ .ant-tabs {
  height: 100%;
}
/deep/ .ant-tabs-content {
  height: calc(100% - 40px);
}
/deep/ .ant-tabs-tabpane {
  height: 100%;
}
/deep/ .tab-box,
/deep/ .ant-tabs {
  height: 100%;
}

/deep/ .ant-input:focus {
  box-shadow: none;
}
.bydm /deep/ .ant-modal {
  min-width: 700px !important;
}
/deep/ .ant-tabs-content {
  height: calc(100% - 44px);
}
/deep/ .ant-table-wrapper {
  height: 100%;
  .ant-spin-nested-loading {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      .ant-table {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
/deep/ .ant-table-body {
  border: none !important;
}
/deep/ .ant-tree {
  height: calc(100% - 42px);
  overflow: auto;
}

/deep/ .box > .ant-tabs > .ant-tabs-content {
  height: calc(100% - 37px) !important;
}

.riginalTable /deep/ .ant-select-selection {
  border: none;
}
/deep/ .ant-tree li span.ant-tree-iconEle {
  margin-top: -2px !important;
}
</style>
